import { AppstoreOutlined, CodeOutlined } from '@ant-design/icons';
import { Tabs, message } from 'antd';
import { useState } from 'react';
import EnvManage from './EnvManage';
import RunScript from './RunScript';
import { agentRunScript } from "../service"
import { useRequestHandle } from '@/utils/utils';
import { useAccess } from 'umi';
import operation from './operation';

const Application = (props) => {
  const [selectKey, setSelectKey] = useState('3');
  const [scriptResult, setScriptResult] = useState([]);
  const runScriptRequest = useRequestHandle(agentRunScript, (data) => {
    message.success("执行成功");
    setScriptResult(data);
  });
  const { canOperation } = useAccess();
  const id = props.id;
  const items = [
    {
      key: '3',
      label: (
        <span>
          <AppstoreOutlined />
          配置
        </span>
      ),
    },

  ];
  if (canOperation(operation.agentRunScript)) {
    items.push({
      key: '4',
      label: (
        <span>
          <CodeOutlined />
          执行命令
        </span>
      ),
    });
  }
  return (
    <div style={{ padding: "0 10px" }}>

      <Tabs

        activeKey={selectKey}
        items={items}
        onChange={(key) => {
          setSelectKey(key);
          setScriptResult([]);
        }}
      />

      {selectKey === '3' ? <EnvManage agentServerId={id} agentAddress={props.record.agentAddress} /> : null}

      {selectKey === '4' && canOperation(operation.agentRunScript) ? <RunScript result={scriptResult} onRun={(d) => {
        runScriptRequest.run({ id, command: d });

      }} /> : null}

    </div>
  );
};

export default Application;
